<template>
  <div class="column">
    <div class="tt">
        <h3>高赞秘籍<i class="iconfont icon-redian" style="color: orangered;"></i></h3>
        <!-- <a href="" class="img"></a> -->
    </div>
    <div class="main">
        <ul>
            <li v-for="(item,index) in list" :key="index" class="li-text">
                
                <div class="text" @click="toSecret(item.secretid)">
                    <i class="iconfont icon-diyi" v-if="index == 0" style="color: red;"></i>
                    <i class="iconfont icon-dier" v-if="index ==1" style="color: orange;"></i>
                    <i class="iconfont icon-daochu1024-28" v-if="index ==2" style="color: yellowgreen;"></i>
                    <i class="iconfont icon-disi" v-if="index == 3" style="color: gainsboro;"></i>
                    <i class="iconfont icon-diwu" v-if="index == 4" style="color: gainsboro;"></i>
                    <i class="iconfont icon-diliutian" v-if="index == 5" style="color: gainsboro;"></i>
                    {{item.title}}
                </div><span class="span-text">已获赞：{{ item.agree }}</span>
            </li>
        </ul>
    </div>
</div>
</template>

<script>
import {GetTop5} from '@/request/api'
export default {
  data(){
    return{
      list:[]
    }
  },
  methods:{
    toSecret(id){
        console.log("id",id)
        this.$router.push({
          path:'/high/detail',
          query:{
              secretid:id
          }
        })
    }
  },
  async created(){
    // 得到前五的数据
    let res  = await GetTop5()
    this.list = res.data.data
  }
}
</script>

<style scoped>
 
/*清除样式*/
body,div,ul,li,h3,a{
    padding: 0;
    margin: 0;
}
ul{
    list-style: decimal;
}
 
.column{
    /* width: 328px; */
    width: 98%;
    margin-right: 10px;
    border: 1px solid #ccc;
}
.column .img{
    float: right;
    width: 100px;
    height: 35px;
    margin-right: 10px;
}
.tt{
    height: 35px;
    border-bottom: 1px solid #ccc;
}
.tt h3{
    float: left;
    height: 35px;
    line-height: 35px;
    text-indent: 0.5em;
    font-family: "微软雅黑";
    width: 150px;
    border-bottom: 1px solid #56a3df;
}
.main{
    font-size: 14px;
    margin: 0px 5px 0px 5px;
}
.column ul li {
    margin: 10px 10px 10px 0px;
    text-indent: 1em; /*缩进*/
}
.column ul li span {
    float: right;
}
.column ul li a:hover{
    text-decoration: underline;
    color: red;
}
.column li a:link,a:visited{
    text-decoration: none;
    color: black;
}
.li-text{
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 2px;
}
.text{
    width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid transparent;
}
.span-text{
    position: absolute;
    right: 0;
}
.text:hover{
    color: #409EFF;
    border-bottom:1px solid rgb(179,216,255);
    cursor: pointer;
}
</style>
